import {Children, React, useState} from 'react';
import './Trade.css';
import 'tailwindcss';
import { Layout, Menu, Button, Grid, Select, Input,Switch, Tag } from 'antd';
import 'bootstrap/dist/css/bootstrap.min.css';
import {
  MenuOutlined,
  ExportOutlined,
  SearchOutlined
} from '@ant-design/icons';
const { Header, Content, Footer } = Layout;
const { useBreakpoint } = Grid;
const items = [{key: '1', label: 'SNS Ecosystem', className: 'menu-item'}, {key: '2', label: 'Marketplace', className: 'menu-item', icon: <ExportOutlined />}];

const preventDefault = e => {
  e.preventDefault();
  console.log('Clicked! But prevent default.');
};

const App = () => {
  const [current, setCurrent] = useState('home');
  const [visible, setVisible] = useState(false);

  const screens = useBreakpoint();
  const isMobile = !screens.md;
  const onClick = (e) => {
    setCurrent(e.key);
    if (isMobile) setVisible(false);
  };
  return (
    <Layout>
      <Header
        style={{
          position: 'sticky',
          top: 0,
          zIndex: 2,
          height: '101px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
                <img src='../public/images/LOGO1.svg' alt="FlashBlock" />
                
                {isMobile ? (
                  <>
                    <Button 
                      type="text" 
                      icon={<MenuOutlined />} 
                      onClick={() => setVisible(true)}
                      style={{ marginLeft: 'auto' }}
                    />
                    <Menu
                      onClick={onClick}
                      selectedKeys={[current]}
                      mode="inline"
                      items={items}
                      style={{ 
                        width: 256,
                        position: 'fixed',
                        left: 0,
                        top: 101,
                        height: 'calc(100vh - 64px)',
                        zIndex: 1001,
                        display: visible ? 'block' : 'none'
                      }}
                    />
                    {visible && (
                      <div 
                        style={{
                          position: 'fixed',
                          top: 64,
                          right: 0,
                          bottom: 0,
                          left: 0,
                          backgroundColor: 'rgba(0,0,0,0.5)',
                          zIndex: 1000
                        }}
                        onClick={() => setVisible(false)}
                      />
                    )}
                  </>
                ) : (
                  <>
                    <Menu
                      theme="dark"
                      mode="horizontal"
                      items={items}
                    />
                    <img className='topSearch' src='../public/images/search.svg' />
                    <Button className='SignBtn' type='primary' style={{
                      width: '158px',
                      height: '40px',
                      backgroundColor: '#31F045',
                      border: 'none',
                      color: '#000000',
                      marginLeft: '191px',
                      textDecoration: 'none',
                      borderRadius: '40px',
                    }}>Connect Wallet</Button>
                  </>
                )}
      </Header>
      <Content style={{ 
        backgroundColor: '#141E20',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundRepeat: 'no-repeat',
        overflowX: 'hidden'
      }}>
        <div className='contains'>
          <div className='tradeMain'>
            <div className='searchArea'>
              <Input className='searchTxt'></Input>
              <Button className='searchBtn' icon={<SearchOutlined />}>
                Search
              </Button>
              <Switch className='searchSwitch'></Switch>
              <div className='searchTip'>Bulk search</div>
            </div>
            <div className='searchHistoryTitle'>
              Recent searches
            </div>
            <div className='searchHistoryList'>
            <Tag closeIcon onClose={preventDefault} style={{backgroundColor: '#23363A', border: '#434C52 1px solid'}} color='#ffffff'>
              flashblock
            </Tag>
            </div>
          </div>
          
        </div>
        <div className='tradeContent'>
          <div className='raList'>
            <div className='title'>Recommended alternatives</div>
            <div className='action'>
              <div className='more'>More excellent options to explore</div>
                <Select className='select' defaultValue='Sort by: Price' options={[{ value: 'Sort by: Price', label: 'Sort by: Price' }]}></Select>
                <img src='../public/images/down.svg' />
            </div>
            <div className='list'>
              <div className='top'>
                <div className='name'>flashstop.sol</div>
                <div className='price'>
                  <img src='../public/images/usdc.svg' />20 USDC
                </div>
              </div>
              <div className='middle'>
              ~20 USD
              </div>
              <Button>Register</Button>
              <div className='cutline'></div>
            </div>
            <div className='list'>
              <div className='top'>
                <div className='name'>flashstop.sol</div>
                <div className='price'>
                  <img src='../public/images/usdc.svg' />20 USDC
                </div>
              </div>
              <div className='middle'>
              ~20 USD
              </div>
              <Button>Register</Button>
              <div className='cutline'></div>
            </div>
            <div className='list'>
              <div className='top'>
                <div className='name'>flashstop.sol</div>
                <div className='price'>
                  <img src='../public/images/usdc.svg' />20 USDC
                </div>
              </div>
              <div className='middle'>
              ~20 USD
              </div>
              <Button>Register</Button>
              <div className='cutline'></div>
            </div>
            <div className='list'>
              <div className='top'>
                <div className='name'>flashstop.sol</div>
                <div className='price'>
                  <img src='../public/images/usdc.svg' />20 USDC
                </div>
              </div>
              <div className='middle'>
              ~20 USD
              </div>
              <Button>Register</Button>
              <div className='cutline'></div>
            </div>
            <div className='list'>
              <div className='top'>
                <div className='name'>flashstop.sol</div>
                <div className='price'>
                  <img src='../public/images/usdc.svg' />20 USDC
                </div>
              </div>
              <div className='middle'>
              ~20 USD
              </div>
              <Button>Register</Button>
            </div>
          </div>
          <div className='searchReulst'>
            <div className='title'>Search result</div>
            <div className='result'>
              <div className='top'>
                <div className='content'>
                  <img src='../public/images/right.svg' />
                  Domain Available - Register Now!
                </div>
              </div>
              <div className='middle'>
                  <div className='name'>flashstop.sol</div>
                  <div className='price'>
                    <img src='../public/images/usdc.svg' />20 USDC
                  </div>
              </div>
              <div className='buttom'>~20 USD</div>
              <Button className='reBtn'>Register</Button>
            </div>
          </div>
        </div>
      </Content>
      {/* <Footer style={{ 
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#0E0E0E',
        color: '#ffffff ',

       }}>
        <div className='flooter'>
        <Row>
          <Col span={22} offset={2}>
            <img src='../public/images/LOGO1.svg' width='266' height='30' alt="FlashBlock" />
          </Col>
        </Row>
        <Row>
          <Col span={8} offset={2}>
            <Row>
              <Col span={8} style={{
                fontSize: '18px',
                fontWeight: 'normal',
                paddingLeft: '30px'
              }}>
                Company
              </Col>
              <Col span={8} style={{
                fontSize: '18px',
                fontWeight: 'normal'
              }}>
                Company
              </Col>
            </Row>
          </Col>
          <Col span={8} offset={6} style={{
                fontSize: '18px',
                fontWeight: 'normal'
              }}>Social</Col>
        </Row>
        <Row style={{
          height: '40px'
        }}>
          <Col span={8} offset={2}>
            <Row>
              <Col span={8} style={{
                fontSize: '16px',
                fontWeight: '400',
                color: '#CACACA',
                paddingLeft: '30px'
              }}>
              Terms of Service
              </Col>
              <Col span={8} style={{
                fontSize: '16px',
                fontWeight: '400',
                color: '#CACACA'
              }}>
              Documentation
              </Col>
            </Row>
          </Col>
          <Col span={8} offset={6}>
            <Row>
              <Col span={2}>
                <div className='vectorBg'>
                  <img src='../public/images/Vector.svg' />
                </div>
              </Col>
              <Col span={2}>
              <div className='vectorBg'>
                <img src='../public/images/Vector(1).svg' />
              </div>
              </Col>
              <Col span={2}>
                <div className='vectorBg'>
                  <img src='../public/images/x1.svg' />
                </div>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <Col span={8} offset={2}>
            <Row>
              <Col span={8} style={{
                fontSize: '16px',
                fontWeight: '400',
                color: '#CACACA',
                paddingLeft: '30px'
              }}>
              Privacy Policy
              </Col>
              <Col span={8} style={{
                fontSize: '16px',
                fontWeight: '400',
                color: '#CACACA'
              }}>
              Status
              </Col>
            </Row>
          </Col>
          <Col span={8} offset={6}></Col>
        </Row>
        <Row>
          <Col span={8} offset={2} style={{
                fontSize: '16px',
                fontWeight: '400',
                color: '#CACACA',
                paddingLeft: '30px'
              }}>
          © 2025 FlashBlock. All rights reserved.
          </Col>
          <Col span={8} offset={6} style={{
                fontSize: '16px',
                fontWeight: '400',
                color: '#CACACA',
              }}>Terms of Service</Col>
        </Row>
        </div>
      </Footer> */}
    </Layout>
  );
};
export default App;